<template>
  <div>
    <search-box @search="loadData" @reset="clientName = ''">
      <div style="display: flex">
        <search-input search-text="Client">
          <a-input v-model:value="clientName" />
        </search-input>
      </div>
    </search-box>
    <a-spin :spinning="loading">
      <e-container style="margin-top: 24px">
        <a-table
          class="ant-table-striped"
          :columns="customColumns"
          :data-source="listData"
          :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
          row-key="id"
          table-layout="fixed"
          :pagination="null"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'tags'">
              <e-tags-field :client="record" />
            </template>
            <template v-if="column.key === 'countryID'">
              <e-country-or-region :code="record.countryID" />
            </template>
            <template v-if="column.key === 'status'">
              <e-client-status :status="record.status"></e-client-status>
            </template>
            <template v-if="column.key === 'fullName'">
              <a
                :href="
                  router.resolve({
                    path: `/client/${record.id}/summary`,
                    query: { 'apply-for-revival-id': record.applyID }
                  }).href
                "
                :target="record.id"
              >
                {{ record.fullName }}
              </a>
            </template>
          </template>
          <template #emptyText><e-empty /></template>
        </a-table>
      </e-container>
    </a-spin>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { cloneDeep } from 'lodash-es'
import SearchBox from '@/pages/components/Search.vue'
import SearchInput from '@/pages/components/SearchInput.vue'
import EContainer from '@/components/EContainer.vue'
import Columns from './columns.js'
import TargetClient from '@/api/targetClient.js'
const customColumns = cloneDeep(Columns)
customColumns.forEach(column => {
  if (column.dataIndex === 'displayName') {
    column.title = 'Applicant'
  }
})
const router = useRouter()
const listData = ref([])
const loading = ref(false)
const clientName = ref('')
const loadData = () => {
  loading.value = true
  TargetClient.listApplyForRevival(clientName.value)
    .then(res => {
      listData.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}
loadData()
</script>

<style lang="less" scoped>
@import '@/assets/style/reset_table';
.search-item {
  .ant-input,
  .ant-select,
  :deep(.ant-picker) {
    width: 240px;
  }
}
</style>
<route lang="yaml">
name: Account Revival
path: /pending-clients/account-revival
meta:
  icon: edit
  title: Account Revival
  sort: 20
  roles: isSalesSupport
</route>
